<template>
	<view class="layout">
		<wd-search
			v-model="search"
			maxlength="10"
			placeholder-left
			@search="getTypeIndex()"
			@clear="getTypeIndex()"
			@cancel="onSearch()"
			cancel-txt="搜索"
		/>
		<view @click.stop="closeOutside()" v-if="typeList.length > 0">
			<wd-swipe-action v-for="item in typeList" :key="item.id">
				<wd-cell :title="item.name" />
				<template #right>
					<view class="action">
						<view
							class="button"
							style="background: #4d80f0;"
							@click="toEdit(item.id)"
						>编辑</view>
						<view
							class="button"
							style="background: #E2231A;"
							@click="confirmDelete(item.id)"
						>删除</view>
					</view>
				</template>

			</wd-swipe-action>
		</view>

		<wd-loadmore
			custom-class="loadmore"
			:state="loadingState"
			v-if="typeList.length > 0"
			@reload="loadMore()"
			error-text="点击加载更多"
		/>

		<wd-status-tip image="content" tip="暂无内容" v-if="typeList.length <= 0" />
	</view>

	<wd-message-box />
	<wd-notify />
</template>

<script setup>
import {onMounted, ref} from 'vue';
import typeApi from '../../apis/type';
import {useQueue, useNotify, useMessage} from 'wot-design-uni';
import {onNavigationBarButtonTap, onReachBottom} from '@dcloudio/uni-app';

// 引入通知组件
const {showNotify} = useNotify();
// 引入队列组件
const {closeOutside} = useQueue();
// 引入消息组件
const message = useMessage();

// 分类列表
const typeList = ref([]);

// 默认加载状态
const loadingState = ref('finished');

// 分页参数
const page = ref(1);
// 每页数量
const limit = ref(10);
// 总数
const total = ref(0);
// 搜索关键字
const search = ref('');

// 获取分类列表
const getTypeIndex = async () => {
	// 设置加载状态
	loadingState.value = 'loading';
	// 请求参数
	const data = {
		search: search.value,
		page: page.value,
		limit: limit.value
	}

	// 调用接口
	await typeApi.getTypeIndex(data).then(res => {
		// 列表数据总数
		total.value = res.data.total;
		// 如果是第一页，直接赋值，否则拼接
		if (page.value === 1) {
			typeList.value = res.data.list;
		} else {
			typeList.value = typeList.value.concat(res.data.list);
		}
	});

	// 如果还有更多，显示加载更多
	if (typeList.value.length < total.value) {
		loadingState.value = 'error';
	} else {
		// 否则显示加载完成
		loadingState.value = 'finished';
	}
}

// 加载更多
const loadMore = () => {
	// 页数加1
	page.value++;
	getTypeIndex();
}

// 搜索
const onSearch = () => {
	typeList.value = [];
	page.value = 1;
	getTypeIndex();
}

// 页面滑到底部时触发
onReachBottom(() => {
	// 如果列表数据小于总数，继续加载
	if (typeList.value.length < total.value) {
		page.value++;
		getTypeIndex();
	}
});

const toEdit = (id) => {
	uni.navigateTo({
		url: '/pages/type/edit?id=' + id
	})
}

// 确认删除
const confirmDelete = (id) => {
	message.confirm({
		title: '提示',
		msg: '确定删除吗？',
	}).then(() => {
		toDelete(id);
	}).catch(() => {
		console.log('取消删除');
	})
}

// 删除分类
const toDelete = async (id) => {
	const data = {
		id: id
	}
	// 调用删除接口
	await typeApi.delType(data).then(res => {
		showNotify({
			type: 'success',
			message: res.msg,
			duration: 1500,
			// 提示完成后执行操作
			onClosed() {
				// 删除成功后，删除列表中的数据
				typeList.value = typeList.value.filter(item => item.id !== id);
			}
		})
	});
}

// 页面挂载时执行
onMounted(() => {
	getTypeIndex();
});

// 控制右上角按钮的点击事件
onNavigationBarButtonTap(() => {
	uni.navigateTo({
		url: '/pages/type/add'
	})
})
</script>

<style scoped lang="scss">
.action {
	height: 100%;
}

.button {
	display: inline-block;
	padding: 0 11px;
	height: 100%;
	color: white;
	line-height: 42px;
}

.wd-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
